import react from "react";
import "../css/nav.css";
import axios from "axios";
class Nav extends react.Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [],
      rooms: [],
      num:0
    }
  }
  componentWillMount() {
    axios.get("/cate/recList?cid=&ct=").then((res) => {
      this.setState({
        list: res.data.data
      })
    })
  }
  getRooms = (type,index) => {
    axios.get('/room/list?page=1&type=' + type).then((res) => {
      this.state.num = index
      this.setState({
        rooms: res.data.data.list
      })
    })
  }
  render() {
    return (
      <div>
        <div className="nav-top">
          <div className="icon">
            <img src="https://shark2.douyucdn.cn/front-publish/m-douyu-v3-master/assets/images/logo_864f3ef.png"/>
          </div>
          <input className="input" placeholder="搜索" tyoe="text" />
          <div className="nav-right">打开APP</div>
        </div>
        <div className="box">
          <ul className="nav-content">
            {
              this.state.list.map((item, index) => {
                return <li key={index} onClick={this.getRooms.bind(this, item.shortName,index)  } style={ {color:this.state.num === index ?"red":"black"}}>{item.name}</li>
              })
            }
          </ul>
        </div>
        <div className="q1"></div>
        {
          this.state.rooms.map((item, index) => {
            return <div className="content" key={index}>
              <img className="img" src={item.roomSrc}/>
              <p>{item.roomName}</p>
            </div>
          })
        }
      </div>
    )
  }
}
export default Nav;